<template>
    <div class="layout-padding">
        <splitpanes horizontal>
            <pane size="50">
                <div class="layout-padding-auto layout-padding-view">
                    <!--查询表单-->
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                        <el-form-item :label="$t('podetail.asnCode')" prop="asnCode">
                            <el-input v-model="state.queryForm.asnCode" clearable placeholder="请输入送货单号"/>
                        </el-form-item>
                        <el-form-item :label="$t('srmAsnH.status')" prop="status">
                            <el-select v-model="state.queryForm.status" style="width: 160px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" @click="query">{{ $t('common.queryBtn') }}</el-button>
                            <el-button icon="refresh"  @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
                            <el-button icon="Position" type="success" @click="releaseOrder" >{{ $t('srmAsnH.release') }}</el-button>
                            <el-button icon="Close" type="info"  @click="unReleaseOrder">{{ $t('srmAsnH.unpublish') }}</el-button>
                            <el-button icon="Delete" type="danger"  @click="cancelOrder">{{ $t('common.delBtn') }}</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="state.dataList" v-loading="state.loading" highlight-current-row border
                              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
                              @row-click="clickRow" style="width: 100%;height: 100%;"
                              @selection-change="selectionChangeHandle">
                        <el-table-column type="selection" width="40" align="center" />
                        <el-table-column type="index" label="#" width="60"/>
                        <el-table-column :label="$t('common.action')" width="150">
                            <template #default="scope">
                                <el-button v-if="scope.row.status === 'audit'" icon="printer" plain type="info" @click="optFormaterPrint(scope.row)" >打印</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="asnCode" :label="$t('podetail.asnCode')" show-overflow-tooltip/>
                        <el-table-column prop="createAsnTime" :label="$t('srmAsnH.productionDate')" show-overflow-tooltip/>
                        <el-table-column prop="createUserName" :label="$t('srmAsnH.createUserName')" show-overflow-tooltip/>
                        <el-table-column prop="sumQty" :label="$t('srmAsnH.totalDeliveryQuantity')" show-overflow-tooltip>
                            <template #default="scope">
                                <!--根据不同的状态选择不同的颜色的tag-->
                                <el-tag size="large" type='success' >
                                    {{ scope.row.sumQty }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="releaseTime" :label="$t('srmAsnH.releaseTime')" show-overflow-tooltip/>
                        <el-table-column prop="status" :label="$t('srmAsnH.status')" show-overflow-tooltip>
                            <template #default="scope">
                                <el-tag v-if="scope.row.status === 'cancel'" type="danger">
                                    {{  '删除' }}
                                </el-tag>
                                <el-tag v-else-if="scope.row.status === 'audit'" type="primary">
                                    {{  '已发布' }}
                                </el-tag>
                                <el-tag v-else-if="scope.row.status === 'toAudit'" type="info">
                                    {{  '未发布' }}
                                </el-tag>
                                <el-tag v-else type="success">
                                    {{  '已入库' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deliveryRemark" :label="$t('SrmPoHeaderGroup.deliveryRemark')" show-overflow-tooltip/>
                    </el-table>
                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                                v-bind="state.pagination"/>
                </div>
            </pane>
            <pane size="50" >
                <el-tabs v-model="activeName" @tab-click="handleClick" class=" card-tabs" type="border-card">
                    <el-tab-pane name="first" >
                        <template #label>
                            <el-icon><calendar/></el-icon>
                            <span class="ml-0.5"> {{ $t('srmAsnH.materialInformation') }} </span>
                        </template>
                        <srmAsnD ref="locationRef" v-if="activeName === 'first'" :rowList="rowList"/>
                    </el-tab-pane>
                    <el-tab-pane name="sercond">
                        <template #label>
                            <el-icon><calendar/></el-icon>
                            <span class="ml-0.5">  {{ $t('srmAsnH.deliveryNoteAllocationDetails') }} </span>
                        </template>
                        <detail ref="locationRef" v-if="activeName === 'sercond'" :rowList="rowList"/>
                    </el-tab-pane>
                </el-tabs>
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts" name="systemSrmPoheader">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {cancelAsnOrder, fetchList, releaseAsnOrder, unReleaseAsnOrder} from "/@/api/platform/srm/srmAsnH";
import srmAsnD from "/src/views/srm/srmAsnH/srmAsnD/index.vue";
import detail from "/src/views/srm/srmAsnH/srmAsnD/detail.vue"
import {viewReport} from '/@/hooks/viewReport'
import type {TabsPaneContext} from 'element-plus'
import {ElMessage,} from "element-plus";
import {useMessage, useMessageBox} from "/@/hooks/message";


const options = ref([
    { label: '全部', value: '' },
    { label: '已发布', value: 'audit' },
    { label: '未发布', value: 'toAudit' },
    { label: '已入库', value: 'arrive' },
    { label: '删除', value: 'cancel' },
]);

// 搜索变量
const queryRef = ref()
const locationRef = ref()
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = tab.props.name
    locationRef.value.query(rowList.value)
}


const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
    },
    pageList: fetchList
})

//  table hook
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    tableStyle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const selectedRows =ref([]) as any
const rowList = ref({}) as any

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({id}) => id);
    multiple.value = !objs.length;
    selectedRows.value = objs;
};

//查询
const query = () => {
    getDataList();
};

// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList(false)
}
// 点击行的时候触发
const clickRow = (row: any) => {
    rowList.value = row
    locationRef.value.query(row)
}

//发布送货单
const releaseOrder = async() =>{
    if(!selectedRows.value.length){
        ElMessage.error('请勾选数据');
        return;// 如果开始时间未选，则不继续执行后续逻辑
    }
    const ids = selectedRows.value.map(row => Number(row.id))
    try {
        await useMessageBox().confirm('确定发布送货单!');
    } catch {
        return;
    }
    try {
        await releaseAsnOrder(ids);
        getDataList();
        useMessage().success('发布成功');
        locationRef.value.query(selectedRows.value)
    } catch (err: any) {
        useMessage().error(err.msg);
    }
}

//取消发布送货单
const unReleaseOrder = async() =>{
    if(!selectedRows.value.length){
        ElMessage.error('请勾选数据');
        return;// 如果开始时间未选，则不继续执行后续逻辑
    }
    const ids = selectedRows.value.map(row => Number(row.id))
    try {
        await useMessageBox().confirm('确定取消发布送货单!');
    } catch {
        return;
    }
    try {
        await unReleaseAsnOrder(ids);
        getDataList();
        useMessage().success('取消发布成功');
        locationRef.value.query(selectedRows.value)
    } catch (err: any) {
        useMessage().error(err.msg);
    }
}

//删除送货单
const cancelOrder = async() =>{
    if(!selectedRows.value.length){
        ElMessage.error('请勾选数据');
        return;// 如果开始时间未选，则不继续执行后续逻辑
    }
    const ids = selectedRows.value.map(row => Number(row.id))
    try {
        await useMessageBox().confirm('确定删除送货单!');
    } catch {
        return;
    }
    try {
        await cancelAsnOrder(ids);
        getDataList();
        useMessage().success('删除成功');
        locationRef.value.query(selectedRows.value)
    } catch (err: any) {
        useMessage().error(err.msg);
    }
}


//打印
const optFormaterPrint = (row) =>{
    if (row.state === "audit") {
        useMessage().error("只有已发布的送货单才能打印");
        return;
    }
    //打开弹框
    viewReport("MF送货单", {id: row.id})
}
</script>